<template>
  <a-layout class="dashboard-container">
    <!-- 顶部标题区 -->
    <a-page-header title="数据可视化" sub-title="监控与分析" class="dashboard-header">
      <template #extra>
        <a-range-picker v-model:value="dateRange" />
        <a-button type="primary" class="refresh-btn">
          <template #icon><reload-outlined /></template>
          刷新
        </a-button>
      </template>
    </a-page-header>

    <!-- 主要内容区 -->
    <a-layout-content class="dashboard-content">
      <!-- 数据概览卡片 -->
      <div class="data-overview">
        <a-row :gutter="16">
          <a-col :xl="6" :lg="12" :md="12" :sm="24" :xs="24" v-for="(item, index) in cardData" :key="index">
            <div class="statistic-card" :style="{ background: item.bgColor }">
              <div class="card-icon">
                <component :is="item.icon" :style="{ color: item.iconColor }" />
              </div>
              <div class="card-content">
                <div class="card-title">{{ item.title }}</div>
                <div class="card-value">{{ item.value }}</div>
                <div class="card-change" :style="{ color: item.change > 0 ? '#52c41a' : '#f5222d' }">
                  {{ item.change > 0 ? "+" : "" }}{{ item.change }}%
                  <arrow-up-outlined v-if="item.change > 0" />
                  <arrow-down-outlined v-else />
                  <span class="change-label">同比</span>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>

      <!-- 第一行图表 -->
      <a-row :gutter="16" class="chart-row">
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="chart-card" :bordered="false">
            <template #title>
              <div class="chart-title">
                <line-chart-outlined />
                <span>趋势分析</span>
              </div>
            </template>
            <LineChart :data="lineChartData" />
          </a-card>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
          <a-card class="chart-card" :bordered="false">
            <template #title>
              <div class="chart-title">
                <pie-chart-outlined />
                <span>分布比例</span>
              </div>
            </template>
            <PieChart :data="pieChartData" />
          </a-card>
        </a-col>
      </a-row>

      <!-- 第二行图表 -->
      <a-row :gutter="16" class="chart-row">
        <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
          <a-card class="chart-card" :bordered="false">
            <template #title>
              <div class="chart-title">
                <bar-chart-outlined />
                <span>区域对比</span>
              </div>
            </template>
            <BarChart :data="barChartData" />
          </a-card>
        </a-col>
        <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
          <a-card class="chart-card" :bordered="false">
            <template #title>
              <div class="chart-title">
                <radar-chart-outlined />
                <span>行为分析</span>
              </div>
            </template>
            <RadarChart :data="radarChartData" />
          </a-card>
        </a-col>
        <a-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
          <a-card class="chart-card" :bordered="false">
            <template #title>
              <div class="chart-title">
                <dot-chart-outlined />
                <span>完成情况</span>
              </div>
            </template>
            <GaugeChart :data="gaugeData" />
          </a-card>
        </a-col>
      </a-row>

      <!-- 底部表格 -->
      <a-card class="table-card" title="最近订单">
        <a-table :columns="columns" :data-source="tableData" :pagination="false" size="middle">
          <template #status="{ text }">
            <a-tag :color="statusColorMap[text]">
              {{ text }}
            </a-tag>
          </template>
          <template #action>
            <a>查看</a>
          </template>
        </a-table>
      </a-card>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import {
  LineChartOutlined,
  PieChartOutlined,
  BarChartOutlined,
  RadarChartOutlined,
  DotChartOutlined,
  ReloadOutlined,
  ArrowUpOutlined,
  ArrowDownOutlined,
  UserOutlined,
  DollarOutlined,
  ShoppingCartOutlined,
  RiseOutlined,
  VerticalAlignTopOutlined,
} from "@ant-design/icons-vue";
import LineChart from "../../components/Charts/LineChart.vue";
import PieChart from "../../components/Charts/PieChart.vue";
import BarChart from "../../components/Charts/BarChart.vue";
import RadarChart from "../../components/Charts/RadarChart.vue";
import GaugeChart from "../../components/Charts/GaugeChart.vue";

const dateRange = ref([]);

// 数据卡片
const cardData = ref([
  {
    title: "XXXXX",
    value: "8,546",
    change: 12.5,
    icon: UserOutlined,
    iconColor: "#1890ff",
    bgColor: "linear-gradient(135deg, #f6fafe 0%, #e6f7ff 100%)",
  },
  {
    title: "XXXXX",
    value: "¥ 126,752",
    change: 8.2,
    icon: DollarOutlined,
    iconColor: "#52c41a",
    bgColor: "linear-gradient(135deg, #f6ffed 0%, #e6ffd1 100%)",
  },
  {
    title: "XXXXX",
    value: "2,632",
    change: -2.4,
    icon: ShoppingCartOutlined,
    iconColor: "#faad14",
    bgColor: "linear-gradient(135deg, #fffbe6 0%, #fff1d1 100%)",
  },
  {
    title: "XXXXX",
    value: "68%",
    change: 3.7,
    icon: RiseOutlined,
    iconColor: "#722ed1",
    bgColor: "linear-gradient(135deg, #f9f0ff 0%, #efdbff 100%)",
  },
]);

// 折线图数据
const lineChartData = ref({
  xAxis: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
  series: [
    { name: "QQ", data: [120, 132, 101, 134, 90, 230, 210] },
    { name: "WW", data: [220, 182, 191, 234, 290, 330, 310] },
  ],
});

// 饼图数据
const pieChartData = ref([
  { value: 335, name: "QQ", itemStyle: { color: "#1890ff" } },
  { value: 310, name: "WW", itemStyle: { color: "#52c41a" } },
  { value: 234, name: "EE", itemStyle: { color: "#faad14" } },
  { value: 135, name: "RR", itemStyle: { color: "#722ed1" } },
  { value: 548, name: "TT", itemStyle: { color: "#f5222d" } },
]);

// 柱状图数据
const barChartData = ref({
  xAxis: ["QQ", "WW", "EE", "RR", "TT"],
  series: [
    { name: "2022年", data: [120, 132, 101, 134, 90, 230, 210] },
    { name: "2023年", data: [220, 182, 191, 234, 290, 330, 310] },
  ],
});

// 雷达图数据
const radarChartData = ref({
  indicator: [
    { name: "XX", max: 100 },
    { name: "XX", max: 100 },
    { name: "XX", max: 100 },
    { name: "XX", max: 100 },
    { name: "XX", max: 100 },
  ],
  series: [
    {
      value: [90, 75, 82, 68, 55],
      name: "行为指标",
    },
  ],
});

// 仪表盘数据
const gaugeData = ref({
  value: 78,
  name: "XX",
});

// 表格数据
const columns = [
  {
    title: "订单ID",
    dataIndex: "id",
    key: "id",
  },
  {
    title: "客户名称",
    dataIndex: "customer",
    key: "customer",
  },
  {
    title: "金额",
    dataIndex: "amount",
    key: "amount",
  },
  {
    title: "状态",
    dataIndex: "status",
    key: "status",
    slots: { customRender: "status" },
  },
  {
    title: "日期",
    dataIndex: "date",
    key: "date",
  },
  {
    title: "操作",
    key: "action",
    slots: { customRender: "action" },
  },
];

const tableData = ref([
  {
    key: "1",
    id: "ORD-20230001",
    customer: "张三",
    amount: "¥ 1,280",
    status: "已完成",
    date: "2023-06-15",
  },
  {
    key: "2",
    id: "ORD-20230002",
    customer: "李四",
    amount: "¥ 2,450",
    status: "处理中",
    date: "2023-06-14",
  },
  {
    key: "3",
    id: "ORD-20230003",
    customer: "王五",
    amount: "¥ 890",
    status: "已取消",
    date: "2023-06-13",
  },
  {
    key: "4",
    id: "ORD-20230004",
    customer: "赵六",
    amount: "¥ 3,210",
    status: "已完成",
    date: "2023-06-12",
  },
  {
    key: "5",
    id: "ORD-20230005",
    customer: "钱七",
    amount: "¥ 1,560",
    status: "处理中",
    date: "2023-06-11",
  },
]);

const statusColorMap = {
  已完成: "green",
  处理中: "orange",
  已取消: "red",
};
</script>

<style scoped lang="less">
.dashboard-container {
  max-height: 83vh;
  overflow: hidden;
  padding: 10px 15px;
  overflow-y: auto; /* 垂直滚动 */
  background-color: #ffffff;

  .dashboard-header {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
    padding: 16px 24px;

    .refresh-btn {
      margin-left: 16px;
    }
  }

  .dashboard-content {
    padding: 24px;
    margin: 0;
    min-height: calc(100vh - 64px);
  }

  .data-overview {
    margin-bottom: 24px;

    .statistic-card {
      display: flex;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
      margin-bottom: 16px;
      height: 120px;

      .card-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;

        svg {
          font-size: 24px;
        }
      }

      .card-content {
        flex: 1;

        .card-title {
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;
          margin-bottom: 8px;
        }

        .card-value {
          font-size: 24px;
          font-weight: 500;
          color: rgba(0, 0, 0, 0.85);
          margin-bottom: 4px;
        }

        .card-change {
          font-size: 12px;

          .change-label {
            color: rgba(0, 0, 0, 0.45);
            margin-left: 4px;
          }
        }
      }
    }
  }

  .chart-row {
    margin-bottom: 16px;
  }

  .chart-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .chart-title {
      display: flex;
      align-items: center;

      svg {
        margin-right: 8px;
        color: @primary-color;
      }
    }
  }

  .table-card {
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  }
}
</style>
